<style>
.header{
    min-width: 960px;
    height: 58px;
    background-color: #1369bf;
    color:#fff;

}
.nav{
    width: 960px;
    margin: 0 auto;
    display: flex;
    height: 58px;
    justify-content: space-between;
    align-items: center;
    }
.navList_left{
  display: flex;

    }
.navList_right{
  display: flex;

}

.navItem{
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
  .navItem:focus{
    outline: none;
  }
  .navItem.routerLinkActive{
    border-bottom: 2px solid #fff;
  }
.spacer {
    flex: 1;
}
.user{
  width: 400px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
</style>
<div class = "header">
  <div class ="nav">

    <div class ="navList_left">
      <div class ='logo' >
        <img  width="40"  src="../assets/img/fudan_logon.jpg" alt="">
      </div>
      <div class = "navItem" [class] = "{active:activeDom==1}" (click) ="addActive(1)"  [routerLink] = "['/room']"  routerLinkActive = "routerLinkActive" >教室</div>
      <div class = "navItem" [class] = "{active:activeDom==1}" (click) ="addActive(2)"  [routerLink] = "['/discussion']" routerLinkActive = "routerLinkActive">讨论区</div>
      <div class = "navItem" [class] = "{active:activeDom==1}" (click) ="addActive(3)"  [routerLink] = "['/about']" routerLinkActive = "routerLinkActive">关于</div>

    </div>
    <div class ="navList_right">
      <div class = "navItem" *ngIf="!user" [class] = "{active:activeDom==1}" (click) ="addActive(4)" [routerLink] = "['/login']" routerLinkActive = "routerLinkActive">登录</div>
      <div class = "user" *ngIf="user" (click) ="logout()">当前登录人：{{user.username}}【{{user.role==="student" ? "学生":"教师"}}】<label style="color: red;">注销</label></div>
    </div>

  </div>

</div>



<router-outlet (activate)="changeOfRoutes()"></router-outlet>
